<template>
  <el-table 
  :data="tableData.filter(data => !search
  || data.id.toString().includes(search.toString()) 
  || data.date.toString().includes(search.toString()) 
  || data.title.toString().includes(search.toString()) 
  || data.name.toString().includes(search.toString()))">
    <el-table-column label="ID" prop="id" />  
    <el-table-column label="公告标题" prop="title" />
    <el-table-column label="发布时间" prop="date" />
    <el-table-column label="发布人" prop="name" />
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="mini" placeholder="输入关键词搜索" />
      </template>
     <template #default="scope">
        <el-button  @click="handleEdit(scope.$index, scope.row)">查看</el-button >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: '2016-05-03',
          title:'喜讯|恭喜我校软件技术专业入选“订单、定制、定向”人才培养模式改革示范专业',
          name: 'Tom',
         
        },
        {
          id: 2,
          date: '2016-05-02',
          title:'沈阳北软信息职业技术学院获批界面设计职业技能等级证书考点资格！',
          name: 'John',
         
        },
        {
          id: 3,
          date: '2016-05-04',
          title:'格微杯第一届datathon (数据分析马拉松)比赛成功举行',
          name: 'Morgan',
         
        },
        {
          id: 4,
          date: '2016-05-01',
          title:'2019-2020学年寒假放假通知',
          name: 'Jessy',
         
        },
         {
          id: 5,
          date: '2016-05-01',
          title:'勿忘国耻 圆梦中华——纪念“九·一八” 事变88周年活动',
          name: 'Jessy',
         
        },
         {
          id: 6,
          date: '2016-05-01',
          title:'沈阳北软计算机系举办2020-2021学年第一学期升旗仪式暨表彰大会',
          name: 'Jessy',
         
        },
      ],
      search: '',
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      console.log(index, row)
    },
  },
}
</script>
